<template>
  <view class="category-container">
    <!-- Header Banner -->
    <view class="header-banner">
      <image src="/static/logo.png" mode="aspectFit" class="logo"></image>
    </view>
    
    <!-- Category Content -->
    <view class="content">
      <!-- Left Sidebar -->
      <scroll-view scroll-y class="sidebar">
        <view 
          v-for="(category, index) in categories" 
          :key="index"
          class="sidebar-item"
          :class="{'active': currentCategory === index}"
          @tap="switchCategory(index)"
        >
          {{category.name}}
        </view>
      </scroll-view>
      
      <!-- Right Content -->
      <scroll-view scroll-y class="main-content">
        <!-- Category Banner -->
        <view class="category-banner">
          <image 
            :src="categories[currentCategory].banner" 
            mode="aspectFill" 
            class="banner-image"
          ></image>
        </view>
        
        <!-- Product List -->
        <view class="product-list">
          <view 
            class="product-item"
            v-for="(product, index) in categories[currentCategory].products"
            :key="index"
          >
            <image :src="product.image" mode="aspectFill" class="product-image"></image>
            <view class="product-info">
              <text class="product-name">{{product.name}}</text>
              <text class="product-desc">{{product.description}}</text>
              <view class="product-bottom">
                <view class="price-points">
                  <text class="price">¥{{product.price}}</text>
                  <text class="points">送{{product.points}}积分</text>
                </view>
                <button class="buy-btn" @tap="buyNow(product)">立即购买</button>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentCategory: 0,
      categories: [
        {
          name: '茶比特系列',
          banner: '/static/category/tea-banner.png',
          products: [
            {
              name: '产品名称',
              description: '这里是产品简介描述',
              price: '1446.8',
              points: '888',
              image: '/static/products/product1.png'
            },
            {
              name: '产品名称',
              description: '这里是产品简介描述',
              price: '1446.8',
              points: '888',
              image: '/static/products/product2.png'
            },
            {
              name: '产品名称',
              description: '这里是产品简介描述',
              price: '1446.8',
              points: '888',
              image: '/static/products/product3.png'
            }
          ]
        },
        {
          name: '001系列',
          banner: '/static/category/001-banner.png',
          products: [
          {
              name: '001',
              description: '这里是产品简介描述',
              price: '1446.8',
              points: '888',
              image: '/static/products/product1.png'
            },
            {
              name: '001',
              description: '这里是产品简介描述',
              price: '1446.8',
              points: '888',
              image: '/static/products/product2.png'
            },
            {
              name: '001',
              description: '这里是产品简介描述',
              price: '1446.8',
              points: '888',
              image: '/static/products/product3.png'
            }
          ]
        },
        {
          name: '002系列',
          banner: '/static/category/002-banner.png',
          products: []
        },
        {
          name: '003系列',
          banner: '/static/category/003-banner.png',
          products: []
        }
      ]
    }
  },
  methods: {
    switchCategory(index) {
      this.currentCategory = index
    },
    buyNow(product) {
      // 实现购买逻辑
      uni.showToast({
        title: '购买功能开发中',
        icon: 'none'
      })
    }
  }
}
</script>

<style>
@import url(./order.css);
</style>